<script setup>
import { reactive, ref } from 'vue'
import easyapi from '../api'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

//新增账号
const addformRef=ref([]);
const addObject=ref({
  username:'',
  position:''
});
const addrules=reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      pattern: /^[A-Za-z]\w{2,7}$/,
      message: '账号必须字母开头后面跟2到7个数字',
      trigger: 'blur'
    }],
    userpass:[{ required: true, message: '请输入密码', trigger: 'blur' },]
})


// 方法用于关闭弹窗并导航到下一个页面
const addSave = async function() {
  addformRef.value?.validate(async valid => {
    if (valid) {
  const result = await easyapi.postJson('/api/addUser', addObject.value);
  console.log(result);
  ElMessage({
    type: 'success',
    message: '注册成功',
  });setTimeout(() => {
          router.push('/one')
        }, 1000)
    } else {
      console.log('表单验证未通过');
      return false;
    }
  });

};

const router = useRouter()
function ToLogin() {
  router.push('/login'); // 跳转到入住登记页面
}
</script>

<template>
    <el-form
      :rules="addrules"
      ref="addformRef"
      :model="addObject"
    >
      <div class="login-container">
        <div class="login-box">
          <h1 class="title">账号注册</h1>
          <el-form-item label="用户名" label-width="80" prop="username">
            <el-input v-model="addObject.username" autocomplete="off" prop="username" :style="{ fontSize: '1.5em' }" clearable />
          </el-form-item>
          <br />
          <el-form-item label="密码" label-width="80" prop="userpass">
            <el-input v-model="addObject.userpass" autocomplete="off"  show-password :style="{ fontSize: '1.5em' }" />
          </el-form-item>
          <div class="button-container">
            <div class="register-link">
            <a href="#" @click.prevent="ToLogin" class="register-link-text">返回登录</a>
            <a href="#" @click.prevent="addSave" class="register-link-text">确定注册</a>
            </div>
         </div>
        </div>
      </div>
    </el-form>
  </template>
  
  
  <style scoped>
  
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../image/16.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .login-box {
    background-color: rgba(250, 252, 253, 0.6); /* 半透明蓝色 */
    padding: 60px;
    border-radius: 30px;
    width: 300px; /* 调整宽度以适应内容 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  
  .title {
    color: #2d17d3; /* 更改为深灰色 */
    margin-bottom: 50px;
    text-align: center;
  }
  
  .el-input {
    width: 100%;
  }
  
  .el-button {
    width: 40%;
    padding: 10px;
    background-color: #508dce;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  
  .el-button:hover {
    background-color: #3e454e;
  }
  
  /* 使用户名和密码输入框的字体更大 */
  .el-input__inner {
    font-size: 1.5em;
  }
  
  .button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .register-link {
  display: flex;
  align-items: center;
  gap: 100px; /* 添加间距 */
  margin-top: 20px;
  margin-left:45px ;
}

.register-link-text {
  color: #163452;
  text-decoration: none;
  cursor: pointer;
}

.register-link-text:hover {
  text-decoration: underline;
}
  </style>